import React, { useState } from 'react';
import { usePagination } from 'ahooks';
import UniversalPagination from '@/components/UniversalPagination';
import { OrderStatus } from '@/configs/global';
import { Input, Space, Card } from 'antd';
// import CreateModalForm from './components/CreateModalForm'
import UpdateModalForm from './components/UpdateModalForm';
import { GridContent } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import tableStyle from '@/styles/publicTable.less';

import {
  getOrdersList,
  // deleteGoods,
} from './service';
import moment from 'moment';
// const { confirm } = Modal
interface TableListProps extends FormComponentProps {}

const OrderList: React.FC<TableListProps> = () => {
  const [refreshCount, setRefreshCount] = useState(0);
  const [searchParams, setSearchParams] = useState({
    keyword: '',
    category_id: '',
  });
  /**
   *  删除节点
   * @param id
   */
  // const handleDelete = async (id: number) => {
  //   const hide = message.loading('正在删除')
  //   if (!id) return true
  //   try {
  //     const res = await deleteGoods(id)
  //     hide()
  //     if (res?.success) {
  //       message.success('删除成功')
  //     } else {
  //     }

  //     return true
  //   } catch (error) {
  //     hide()
  //     message.error('删除失败')
  //     return false
  //   }
  // }

  /**
   *  获取数据列表
   * @param selectedRows
   */
  const fetchList = async (params: {
    page: number;
    pageSize: number;
    keyword: string;
    category_id: string;
  }) => {
    try {
      const res = await getOrdersList({
        ...params,
      });
      if (res.success) {
        return {
          total: res.data.totalNum,
          list: res.data.list,
        };
      } else {
        return { total: 0, list: [] };
      }
    } catch (error) {
      return { total: 0, list: [] };
    }
  };

  const columns: ProColumns[] = [
    {
      title: '订单id',
      dataIndex: 'id',
      hideInSearch: true,
      className: tableStyle.firstColumnPadding,
      width: '70px',
    },
    {
      title: '创建人ID',
      dataIndex: 'user_id',
      hideInSearch: true,
      width: '70px',
    },
    {
      title: '创建人',
      dataIndex: 'user_info',
      hideInSearch: true,
      width: '90px',
      render: (_, record) => {
        return <span>{record.user_info.username}</span>;
      },
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      width: '130px',
      align: 'center',
      hideInSearch: true,
      render: (_) => {
        return _ && moment(_).format('YYYY-MM-DD hh:mm:ss');
      },
    },
    {
      title: '订单金额',
      dataIndex: 'pay_amount',
      width: '100px',
      align: 'center',
      hideInSearch: true,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: '90px',
      align: 'center',
      hideInSearch: true,
      render: (_) => {
        return <span>{OrderStatus[_]}</span>;
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      width: '120px',
      align: 'center',
      render: (_, row) => (
        <Space direction="horizontal" style={{ width: '100%' }}>
          <UpdateModalForm formVals={row} setRefreshCount={setRefreshCount} />
        </Space>
      ),
    },
  ];
  const { data, loading, pagination } = usePagination(
    ({ current, pageSize }) => {
      return fetchList({
        page: current,
        pageSize,
        keyword: searchParams.keyword,
        category_id: searchParams.category_id,
      });
    },
    {
      refreshDeps: [searchParams, refreshCount],
    },
  );
  return (
    <GridContent>
      <Card bodyStyle={{ padding: '32px 24px' }}>
        <Space direction="vertical" size={32} style={{ width: '100%' }}>
          <Space direction="horizontal" size={32} style={{ width: '100%' }}>
            <Input.Search
              style={{ width: 300 }}
              size="large"
              allowClear
              placeholder="输入关键词搜索"
              onSearch={(val) => {
                setSearchParams({
                  ...searchParams,
                  keyword: val,
                });
              }}
            />
          </Space>
          <Card title="订单管理" bodyStyle={{ padding: 0 }}>
            <ProTable
              className={tableStyle.proTableFirstColumnPadding}
              columns={columns}
              loading={loading}
              dataSource={data?.list}
              rowKey="id"
              options={false}
              search={false}
              pagination={false}
            />
            <UniversalPagination pagination={pagination} total={data?.total} />
          </Card>
        </Space>
      </Card>
    </GridContent>
  );
};

export default OrderList;
